<template>
	<page-navbar class="page-scroll-view" :navbar-config="navbarConfig" @leftClick="$emit('leftClick')">
		<view class="page-scroll-view-header">
			<slot name="header"></slot>
		</view>

		<view class="page-scroll-view-content" :style="{ height: `calc(100% - ${headerHeight}rpx)` }">
			<scroll-view
				class="scroll-view"
				scroll-y="true"
				:refresher-enabled="true"
				:refresher-triggered="pullDownFlag"
				:scroll-top="scrollTopHeight"
				@refresherrefresh="pullDown"
				@scrolltolower="scrollLoad"
			>
				<slot name="content"></slot>
				<view class="load-tips" v-if="loadTipsStatus !== -1">
					<text v-if="loadTipsStatus === 0">上滑加载</text>
					<text v-if="loadTipsStatus === 1">加载中...</text>
					<text v-if="loadTipsStatus === 2">没有更多了</text>
				</view>
			</scroll-view>
		</view>
	</page-navbar>
</template>

<script>
/*
 * 事件汇总：
 * 1. leftClick
 * 2. pullDown
 * 3. scrollLoad
 *  */
export default {
	props: {
		// 导航栏配置
		navbarConfig: {
			type: Object,
			// 详细配置参数见<page-navbar>组件
			default: () => ({}),
		},
		// 下拉加载状态
		pullDownFlag: {
			type: Boolean,
			default: false,
		},
		// 底部上滑加载提示语，不传参默认不显示
		loadTipsStatus: {
			type: Number,
			default: -1,
		},
	},
	data() {
		return {
			scrollTopHeight: 0,
			headerHeight: 0,
		};
	},
	methods: {
		pullDown() {
			this.$emit('update:pullDownFlag', true);
			this.$emit('pullDown');
		},
		// 滚动到顶部，父组件可通过$refs获取实例进行调用
		scrollTop() {
			this.scrollTopHeight -= 1;
		},
		scrollLoad() {
			this.$emit('scrollLoad');
		},
	},
	mounted() {
		// 计算header高度
		this.$nextTick(() => {
			setTimeout(() => {
				uni
					.createSelectorQuery()
					.in(this)
					.select('.page-scroll-view-header')
					.boundingClientRect(({ height }) => {
						const screenWidth = uni.getSystemInfoSync().screenWidth;
						this.headerHeight = (750 * height) / screenWidth + 1;
					})
					.exec();
			}, 0);
		});
	},
};
</script>

<style lang="scss">
.page-scroll-view {
	.page-scroll-view-content {
		.scroll-view {
			height: 100%;

			.load-tips {
				color: #aaabb6;
				font-size: 30rpx;
				text-align: center;
				padding-bottom: 30rpx;
			}
		}
	}
}
</style>
